<template>
  <el-container class='elheight'>
    <el-aside class='appTree'>
      <app-tree :tree-data="treeData"></app-tree>
    </el-aside>
    <el-main>
      <el-container>
        <el-header class="dzy-main-header">
          <div class="btn-group-el">
            <btn-group :currentSelectedData="currentSelectedData" @btnClickCallback="btnClickCallback"></btn-group>
          </div>
          <div class="dzy-custom-search-box">
            <div>
              名称：<el-input placeholder="请输入内容" v-model="selectForm.identityNumber" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>
              电话：<el-input placeholder="请输入内容" v-model="selectForm.name" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>
              编号：<el-input placeholder="请输入内容" v-model="selectForm.phone" clearable class="dzy-custom-input"></el-input>
            </div>
          </div>
        </el-header>
        <el-main>
          <app-table
            :page-data="pageData"
            :table-columns="tableColumns"
            v-on:currentChange="handleCurrentChange"
            v-on:handleCheckedRows="handleCheckedRows">
          </app-table>
          <el-dialog title="" :visible.sync="dialogFormVisible">
            <el-form :model="formData" label-width="50%">
              <el-form-item label="名称：" label-width="30%">
                <el-input v-model="formData.identityNumber" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="简称：" label-width="30%">
                <el-input v-model="formData.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="编码：" label-width="30%">
                <el-input v-model="formData.usedName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="上级：" label-width="30%">
                <div class="block">
                  <el-cascader
                    placeholder="请选择"
                    :options="options"
                    filterable
                    v-model="formData.gridId"
                    change-on-select>
                  </el-cascader>
                </div>
              </el-form-item>
              <el-form-item label="部门层级：" label-width="30%">
                <el-select v-model="formData.nation" placeholder="请选择">
                  <el-option label="县级" value="1"></el-option>
                  <el-option label="乡镇" value="2"></el-option>
                  <el-option label="村级" value="3"></el-option>
                  <el-option label="网格" value="4"></el-option>
                  <el-option label="职能部门一级" value="5"></el-option>
                  <el-option label="职能部门二级" value="6"></el-option>
                  <el-option label="职能部门三级" value="7"></el-option>
                  <el-option label="其他" value="8"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否单位：" label-width="30%">
                <el-select v-model="formData.maritalStatus" placeholder="请选择">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="地址：" label-width="30%">
                <el-input v-model="formData.politicalStatus" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="地图面积：" label-width="30%">
                <el-input v-model="formData.servicePlace" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话：" label-width="30%">
                <el-input v-model="formData.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="传真：" label-width="30%">
                <el-input v-model="formData.gridId" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="邮箱：" label-width="30%">
                <el-input v-model="formData.householdAddr" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="联系人：" label-width="30%">
                <el-input v-model="formData.householdAddrDetail" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="包干领导：" label-width="30%">
                <el-input v-model="formData.houseHolderIdentityNumber" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="包干责任人：" label-width="30%">
                <el-input v-model="formData.houseHolderName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="实际面积：" label-width="30%">
                <el-input v-model="formData.houseHolderPhone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="图片：" label-width="30%">
                <el-input v-model="formData.householdNumber" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="简介：" label-width="30%">
                <el-input v-model="formData.liveGridId" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import AppTree from '@/components/common/AppTree'
import AppTable from '@/components/AppTable'
import BtnGroup from '@/components/BtnGroup'
import AppMap from '@/components/AppMap'
import {getOptionDataType} from '@/store/region'
import {findPopulation, createPopulation, updatePopulation, deletePopulation, findGridTree} from '@/http/AppApi'
export default {
  data () {
    return {
      dialogFormVisible: false,
      treeData: [],
      pageData: {},
      allDeptData: [],
      allRegionData: [],
      dialogTitle: '',
      currentSelectedData: [],
      showOnly: false,
      tableColumns: [
        { prop: 'name', label: '名称' },
        { prop: 'identityNumber', label: '编号' },
        { prop: 'gender', label: '网格长' },
        { prop: 'phone', label: '网格长电话' },
        { prop: 'nation', label: '地址' },
        { prop: 'birthplace', label: '实际面积' }
      ],
      tableDada: [],
      formData: {},
      selectForm: {},
      options: []
    }
  },
  components: {
    AppMap,
    AppTree,
    BtnGroup,
    AppTable
  },
  mounted () {
    findGridTree().then(data => {
      this.treeData = data
      this.options = getOptionDataType(this.treeData[0].children)
    })
    this.getTableData()
  },
  methods: {
    save () {
      this.dialogFormVisible = false
      if (this.formData) {
        if (this.formData.id) {
          updatePopulation(this.formData).then(data => {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.getTableData()
          })
        } else {
          createPopulation(this.formData).then(data => {
            if (data.code === '200') {
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              this.getTableData()
            } else {
              this.$message({
                type: 'info',
                message: data.message
              })
            }
          })
        }
      }
    },
    edit (row) {
      this.formData = row
      this.dialogTitle = '编辑部门信息'
      this.dialogFormVisible = true
    },
    del (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rows.forEach(row => {
            deletePopulation(row).then(data => {
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              this.getTableData()
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    cancel () {
      this.dialogFormVisible = false
      this.formData = {}
    },
    openSave () {
      this.dialogTitle = '添加部门信息'
      this.dialogFormVisible = true
    },
    getTableData (param) {
      findPopulation(param).then(data => {
        if (data) {
          this.pageData = data
          if (this.pageData.items && this.pageData.items instanceof Array) {
            this.tableData = this.pageData.items
          }
        }
      })
    },
    handleCurrentChange (val) {
      let param = {
        offset: (val - 1) * 10
      }
      this.getTableData(param)
    },
    btnClickCallback (callbackData) {
      if (callbackData.btnType === 'delete') {
        this.dialogFormVisible = false
        let rows = callbackData.rows
        this.del(rows)
      } else {
        if (callbackData.btnType === 'post') {
          this.formData = {}
        } else {
          this.formData = callbackData.rows[0]
        }
        this.showOnly = callbackData.sohwOnly
        this.dialogTitle = callbackData.dialogTitle
        this.dialogFormVisible = true
      }
    },
    handleCheckedRows (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.currentSelectedData = rows
        this.formData = rows[0]
      }
    },
    // 检索按钮操作
    searchHandleClick () {
      // 此处加判断 没有搜索条件 return
      this.getTableData(this.selectForm)
    }
  }
}
</script>
<style>
</style>
